@import './base.less';

.main-body {
    margin-top: 11.7333vw;
    margin-bottom: 13.3333vw;
    width: 100%;
    min-height: 200vw;
    position: relative;
    // background-color: aqua;
    top: 11.7333vw;
    left: 0;

    .search {
        width: 100%;
        height: 12.8vw;
        padding: 2.1333vw 2.1333vw 3.2vw;
        background-color: #fff;
        position: fixed;
        left: 0;
        top: 11.7333vw;
        z-index: 15;

        a {
            color: #000;

            .last {
                width: 100%;
                height: 8.5333vw;
                background-color: #f7f7f7;
                text-align: center;
                line-height: 8.5333vw;
                border-radius: 6.6667vw;
                font-size: 4.8vw;

                span {
                    font-size: 3.7333vw;
                }

                i {
                    font-size: 3.7333vw;
                }
            }
        }

    }

    .main {
        position: absolute;
        top: 2px;
        width: 100%;
        display: flex;



        .left {
            height: 240vw;
            width: 22.9333vw;
            background-color: #faf8f6;
            display: flex;
            flex-direction: column;

            &::-webkit-scrollbar {
                /* Chrome、Safari和Opera浏览器需要添加此样式来隐藏滚动条 */
                display: none;
            }

            span {
                height: 12vw;

                position: relative;
                z-index: 10;
                display: block;
                font-size: 13px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .active {

            background: #fff;
            color: #fa2209;
            border-right: none;
            font-size: 14px;
        }


        .right {
            height: 140vw;
            flex: 1;
            padding: 0 2.6667vw;
            // background-color: blueviolet;
            padding-top: 1.8667vw;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            overflow: auto;

            &::-webkit-scrollbar {
                /* Chrome、Safari和Opera浏览器需要添加此样式来隐藏滚动条 */
                display: none;
            }


            .flex-three {
                display: flex;
                flex-direction: column;
                width: 33.3333%;
                height: 30.6667vw;
                // background-color: aqua;

                .cate-img {
                    padding: 2.1333vw 2.1333vw 0.5333vw 2.1333vw;
                    // height: 100%;
                    flex: 1;

                    // background-color: #fff;
                    .img {
                        // height: 100%;
                        // display: block;
                        height: 19.7333vw;

                        img {
                            height: 100%;
                            // display: block;

                        }
                    }
                }

                .text-name {
                    height: 8.5333vw;
                    padding-bottom: 4vw;

                    display: block;
                    text-align: center;
                    font-size: 13px;
                    color: #444;
                }
            }
        }
    }





}